<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="always">
        <el-row type="flex" justify="end" class="card">
          <el-col>
            <el-button type="primary" size="small" @click="isShowDialogFn">添加客户</el-button>
          </el-col>
          <!-- 下拉框 -->
          <el-select v-model="value" placeholder="经纪">
            <el-option
              v-for="item in manageList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>

          <el-input v-model="getCilent" placeholder="请输入关键字" />
          <el-button @click="Screening">筛选</el-button>

        </el-row>

        <!-- 数据渲染 -->
        <el-table :data="tableData" height="500" border style="width: 100%" class="table">
          <el-table-column prop="image" label="图片">
            <template #default="{row}">
              <img :src="row.image" alt="" style="width:150px">

            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="phone" label="电话" />
          <el-table-column prop="agent.name" label="经纪" />
          <el-table-column prop="wechat" label="微信" />
          <el-table-column prop="desc" label="介绍" />
          <el-table-column prop="address" label="操作">
            <template #default="obj">
              <!-- {{ obj.row }} -->
              <el-button size="small" type="warning" @click="dietCilent(obj.row.id)">编辑</el-button>
              <el-button
                size="small"
                type="danger"
                @click="deleteClient(obj.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器
    total  总数
    page-size  每页显示的条数
    -->
        <el-row type="flex" justify="center">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="pageCilent._limit"
            :current-page="currentPage"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>

      <addDialog
        ref="getCilent"
        :is-show-dialog.sync="isShowDialogRole"
        :manage-list="manageList"
        @close="isShowDialogRole=false"
        @cloaDialog="isShowDialogRole=false"
        @Refresh="RefreshFn"
      />
    </div>
  </div>
</template>

<script>
import AddDialog from '@/views/client/components/addDialog.vue'
import { Drawing, deleteKehu, deitCilentFn, getCilents, manage } from '@/api/user'

export default {
  components: {
    AddDialog
  },
  data() {
    return {
      // 经纪
      manageList: [],
      value: '',
      isShowDialogRole: false,
      // value: '',
      list: {
        image: '',
        name: '',
        email: '',
        phone: '',
        desc: '',
        wechat: '',
        agent: ''
      },
      tableData: [],
      pageCilent: {
        _limit: 2, // 条数
        _start: 0 // 页数
      },
      currentPage: 1, // 当前页
      total: 0, // 总数
      getCilent: '' // 筛选

    }
  },
  async created() {
    // 页面进来获取总条数
    const { data } = await getCilents()
    this.total = data
    // 页面加载
    this.DrawingFn()
    // console.log(this.$store.getters.info)
    this.manageFn()
  },

  methods: {
    // 经纪
    async manageFn() {
      const { data } = await manage()
      this.manageList = data
    },
    // 筛选
    async Screening() {
      // 筛选  把用户输入绑定的modle值赋值到参数里面
      // 判断用户有没有输入搜索的值，没有的话就不发请求
      if (this.getCilent || this.value) {
        // 因要用都数组包对象里面的id，所以要遍历拿到id
        let arr = {}
        this.manageList.forEach(item => {
          if (item.name === this.value) {
            arr = item
          }
        })
        const scrList = { name_contains: this.getCilent, agent_contains: arr.id }
        const { data } = await Drawing(scrList)
        // 页码回到当前页
        this.total = data.length
        // 回到当前页
        this.currentPage--
        this.tableData = data
        this.value = ''
      } else {
        return
      }
    },

    // 翻页
    currentChange(newPaze) {
      // this.pageCilent._start = newPaze - 1
      this.pageCilent._start = this.pageCilent._limit * (newPaze - 1)
      console.log(newPaze)
      this.DrawingFn()
      // kk
    },
    // 子传父添加成功刷新页面
    async RefreshFn() {
      console.log(132)
      // 重新获取分页
      const { data } = await getCilents()
      this.total = data
      this.DrawingFn()
    },
    // 删除客户
    async deleteClient(id) {
      // 二次询问用户是否删除
      await this.$confirm('确认是否删除')
      // 发请求删除
      await deleteKehu(id)
      // 提示用户删除成功
      this.$message.success('删除成功')

      // 判断只剩下一条信息，页码减一
      if (this.tableData.length === 1 && this.pageCilent._start > 0) {
        this.pageCilent._start-- // 页数
      }
      const { data } = await getCilents()
      console.log('总条数', data)
      this.total = data
      // 页面加载
      this.DrawingFn()
    },

    // 封装页面接口数据
    async DrawingFn() {
      // console.log(obj)
      const { data } = await Drawing(this.pageCilent)
      console.log('页数：', data)
      this.tableData = data
    },
    update() {
      this.DrawingFn()
    },
    // 弹框
    isShowDialogFn() {
      this.isShowDialogRole = true
    },
    // 编辑
    async dietCilent(id) {
    //  发请求数据回显
      const { data } = await deitCilentFn(id)
      // console.log(106, data)
      this.$refs.getCilent.addList = { ...data, id }
      this.$refs.getCilent.fileList[0] = { ...this.$refs.getCilent.fileList[0], url: data.image }

      // 弹框
      this.isShowDialogRole = true
    }

  }

}
</script>

<style lang="scss" scoped>
::v-deep .app-container{
  .header{
    margin-bottom: 25px;
    border-bottom: 1px solid #dcdfe6;
    .searchinp{
       margin-bottom: 20px;
        .search{
          border-color: #ccc;
        }
    }
  }
  .pageborder{
    height: 60px;
    margin-top: 30px;
    border-top: 2px solid #dcdfe6;
  }
  .operation{
    margin-top: 20px;
  }
}
::v-deep .el-input--suffix .el-input__inner{
  width: 150px;
}
.card{
  border-bottom: 1px solid rgba(0, 0, 0, 0.233);
}
.table{
  margin-top:30px;
}
::v-deep .el-input--suffix .el-input__inner{
  height: 40px;

}
button, input, optgroup, select, textarea{
  height: 40px;
  margin-bottom: 30px;

}

</style>
